<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2 v-on 事件绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:v-on指令：鼠标单击事件</h1>
            <p>我已经被你点了{{num}}次了</p>
            <button v-on:click="num++">点我点我</button>
            <button v-on:click="num--">点我我就剪掉你</button>
            <h3>许多事件处理逻辑会更加复杂，所以在复杂的逻辑下，直接把代码写在v-o指令中是不合适的,
                因此，v-on可以接收一个需要调用的方法名称
            </h3>
            <button v-on:click="log()">打印消息</button>
            <button v-on:click="log('我是参数')">打印含参数的消息</button>
            <h3>v-on:click 可以简写成 @click</h3>
            <button @click="log('马上下课，很开心啊！')">简写形式打印消息</button>
        <h1>知识点2:键盘事件keyup(键盘释放事件)，(键盘按下事件)</h1>
            <input type="text" @keyup="show('释放')">
            <input type="text" @keydown="show('按下')">
        <h1>知识点3:其他事件：dblclick双击事件，contextmenu右击事件，mouseover鼠标上移，mouseout鼠标移开</h1>
            <p>看看变化{{num}}</p>
            <button @dblclick="num++">双击</button>
            <button @contextmenu="num++">右击</button>
            <button @mouseover="num++">鼠标上移</button>
            <button @mouseout="num++">鼠标移开</button>
        <h1>知识点4：事件修饰符</h1>
            <h3>1 .once 修饰符 表示只能点一次</h3>
                <button @click.once="num++">相信我只能点一次</button>
            <h3>2 .prevent 修饰符 阻止元素的默认行为</h3>
                <h4>submit有一个默认的行为，就是提交后重新渲染页面，可以通过prevent阻止</h4>
            <form @submit="handleSubmit">
                <p>不使用修饰符</p>
                <button type="submit">提交</button>
            </form>
            <form @submit.prevent="handleSubmit">
                <p>使用修饰符</p>
                <button type="submit">提交</button>
            </form>
            <h3>3 .stop修饰符 阻止层叠事件中的冒泡</h3>
                <h4>冒泡是内部元素事件触发后，继续向外触发</h4>
                <div id="box1" @click.stop="box('我是box1')">box1
                    <div id="box2" @click.stop="box('我是box2')">box2
                        <div id="box3" @click.stop="box('我是box3')">box3</div>
                    </div>
                </div>
            <h3>4 .capture修饰符 事件的捕获</h3>
                <h4>在层叠事件中,我们默认从内到外触发事件,如果想要先处理外层的某个事件，可以使用capture进行捕获
                    当内部元素触发时，先处理capture修饰的事件,然后再提交当前事件，捕获的顺序由外到内
                </h4>
                <div id="box1" @click.capture="box('我是box1')">box1
                    <div id="box2" @click.capture="box('我是box2')">box2
                        <div id="box3" @click="box('我是box3')">box3</div>
                    </div>
                </div>
            <h3>5 .self修饰符 只在绑定了事件的那个对象层中使用</h3>
                <div id="box1" @click="box('我是box1')">box1
                    <div id="box2" @click.self="box('我是box2')">box2
                        <div id="box3" @click="box('我是box3')">box3</div>
                    </div>
                </div>
                <h4>修饰符是可以进行叠加的，臂如.capture.stop.</h4>
            <h3>6 监听键盘按键修饰符</h3>
                <p>.enter .tab .delete(监听删除键和退格键) .esc .space .up .down .left .right .ctrl .alt .shift .meta(window键)</p>
                <h4>按键监听是可以组合的，例如alt+c</h4>
                <input type="text" @keyup.alt.c="show('我是加了alt和c才触发')">
                <button @click.ctrl.shift="show('我是ctrl+shift')">等等</button>
                <h4>.exact允许你控制精准的系统修饰符组合触发</h4>
                <button @click.ctrl.shift.exact="show('我是ctrl+shift')">精准等等</button>
            <h3>7 鼠标修饰符 .left .right</h3>
          
    </div>
</body>
</html>

<script>
    const appConn=Vue.createApp({
        data(){
            return{
                num:1,
                hh:1
            }
        },
        methods: {
<<<<<<< HEAD
            log(val){
                console.log(val||'你好哈哈哈！');
            },
            show(val){
                console.log(val);
            },
            handleSubmit(){
                console.log("提交成功");
            },
            box(val){
                alert(val);
=======
            log(vla){
                console.log(vla||'你好哈哈哈！');
>>>>>>> 6f7a70d164b80555e2ce21446f84b2d0e08e3e37
            }
        },
    }).mount("#app")
</script>

<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: aqua;
    }
    #box2{
        height: 150px;
        width: 250px;
        background-color: rgb(68, 0, 255);
    }
    #box3{
        height: 100px;
        width: 200px;
        background-color: rgb(255, 251, 0);
    }
</style>